<template>
	<view>
		<!-- 	<uni-nav-bar shadow statusBar="true" fixed="true" left-icon="left" @clickLeft="goBack()" leftText="返回" title="织机监控"
        right-icon="scan" @clickRight="handleScanCode()" /> -->
		<view class="deviceSerach">
			<view style="width: 45%">
				<uni-search-bar radius="20" placeholder="机台号" cancelButton="none" @blur="getDevice()"
					@clear="getDevice('del')" v-model="query.devNum" />
			</view>
			<view style="width: 40%">
				<uni-data-picker placeholder="员工" v-model="query.empId" :localdata="employees" :preload="true"
					@change="changeEmp" />
			</view>
			<!-- 			<view style="width: 22%">
        <uni-data-select placeholder="客户" v-model="customer" :localdata="customers" emptyText="无" />
      </view> -->
			<view style="width: 15%">
				<view style="padding-left: 5rpx; border-left: 3rpx solid #b1b3b4">筛选</view>
			</view>
		</view>

		<view class="fivestatus">
			<view class="onestatus" @click="selectStatus(0)">
				<view class="align-center text-center">
					<image class="iconDevice" src="/static/images/devicestatus/weixiu.png"></image>
					<text>{{ getBlank() }}全部</text>
				</view>
				<view class="text-center">{{ allNum }}</view>
			</view>
			<view class="onestatus" @click="selectStatus(1)">
				<view class="align-center text-center">
					<image class="iconDevice" src="/static/images/devicestatus/yunxing.png"></image>
					<text>{{ getBlank() }}运行</text>
				</view>
				<view class="text-center">{{ startNum }}</view>
			</view>

			<view class="onestatus" @click="selectStatus(2)">
				<view class="align-center text-center">
					<image class="iconDevice" src="/static/images/devicestatus/tingji.png"></image>
					<text>{{ getBlank() }}停机</text>
				</view>
				<view class="text-center">{{ stopNum }}</view>
			</view>

			<view class="onestatus" @click="selectStatus(3)">
				<view class="align-center text-center">
					<image class="iconDevice" src="/static/images/devicestatus/inline.png"></image>
					<text>{{ getBlank() }}离线</text>
				</view>
				<view class="text-center">{{ onlineNum }}</view>
			</view>
		</view>

		<view class="yixie">
			<view style="margin-top: 10rpx">
				<uni-grid :column="3" :highlight="true" @change="change" :show-border="true" :square="false"
					:key="deviceKey">
					<uni-grid-item v-for="(item, index) in deviceList" :index="index" :key="index">
						<view class="grid-item-box">
							<view style="display: flex">
								<view class="deviceTopLeft"
									:style="{'background-color':parseColor(item),'border':parseColor(item)+' 5rpx solid'}">
									{{ item.devNum }}
								</view>
								<view class="deviceTopRight" :style="{'color':parseColor(item)}">
									{{parsePlan(item.rate)}}%
								</view>
							</view>
							<view class="deviceDetail" style="font-size: 25rpx">转速：{{ parseHex(item.devSpeed) }}转/分
							</view>
							<view class="deviceDetail" style="color: black; font-weight: bold; font-size: 30rpx">
								{{ item.empName != null ? item.empName + "/" : "" }}{{parseNumHex(item.nowNum)}}圈
							</view>
							<view class="deviceDetail">类型：{{ item.devModel != null ? item.devModel : "" }}</view>
							<view class="deviceDetail" style="font-size: 20rpx">SN：{{ item.devSn }}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<devset ref="devset" @getList="getDevice"></devset>

		<view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="填写设备sn号" @confirm="dialogInputConfirm">
					<uni-forms>
						<uni-forms-item labelWidth="0px">
							<uni-easyinput v-model="writeDevSn" />
						</uni-forms-item>
					</uni-forms>
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<uni-load-more :status="status"></uni-load-more>
		<uni-fab v-if="userType === '1'" ref="fab" horizontal="right" vertical="bottom" :content="content"
			@fabClick="fabClick" @trigger="trigger">
		</uni-fab>
	</view>
</template>

<script>
	import {
		listDevice,
		getStaNum
	} from "@/api/company/device.js";
	import {
		getUserList
	} from "@/api/system/user.js";
	import devset from "./devset.vue";

	export default {
		components: {
			devset
		},
		data() {
			return {
				userType: this.$store.getters.userType,
				modalName: "",
				deviceKey: 0,
				status: "more",
				total: 0,
				query: {
					companyId: this.$store.getters.companyId,
					devNum: "",
					pageNum: 1,
					pageSize: 50,
					empId: 0,
					userId: 0,
					runStatus: 0
				},
				writeDevSn: "",
				content: [{
						iconPath: "/static/navigation/scan.png",
						selectedIconPath: "/static/navigation/scan_active.png",
						text: "扫码",
						active: false,
					},
					{
						iconPath: "/static/navigation/write.png",
						selectedIconPath: "/static/navigation/write_active.png",
						text: "填写",
						active: false,
					},
				],
				employees: [],
				customers: [],
				employee: 0,
				customer: 0,
				clothtype: 0,
				deviceList: [],
				allNum: 0,
				stopNum: 0,
				startNum: 0,
				onlineNum: 0,
				refresh: null
			};
		},
		onShow() {
			this.getInitDeviceList()
			let that = this
			this.refresh = setInterval(function() {
				that.getStaData();
				let querys = {...that.query}
				querys.pageNum = 1
				querys.pageSize = that.deviceList.length
				listDevice(querys).then((res) => {
					that.total = res.total;
					that.deviceList = res.rows;
				});
			}, 5000)
		},
		onHide() {
			clearInterval(this.refresh)
		},
		onUnload() {
			clearInterval(this.refresh)
		},
		mounted() {
			this.getDevice();
			this.getEmpolyees();
			this.getCustomers();
			this.getStaData();
		},
		onPullDownRefresh() {
			this.getInitDeviceList()
		},
		onReachBottom() {
			if (this.total > this.deviceList.length) {
				this.query.pageNum++;
				listDevice({
					...this.query
				}).then((res) => {
					this.total = res.total;
					this.deviceList = _.concat(this.deviceList, res.rows);
					uni.hideLoading();
					if (this.total <= this.deviceList.length) {
						this.status = "no-more";
					}
				});
			} else {
				this.status = "no-more";
			}
		},
		options: {
			styleIsolation: "shared",
		},
		methods: {
			changeEmp() {
				this.getInitDeviceList()
			},
			//重置查询列表
			getInitDeviceList() {
				this.query.pageNum = 1;
				this.query.runStatus = 0;
				this.getDevice();
				this.getStaData();
			},
			selectStatus(num) {
				this.query.runStatus = num
				this.getDevice()
			},
			parseColor(item) {
				let colors = "#b946d0"
				if (item.isOnline == 1) {
					return '#a9a9a9'
				}
				if (_.parseInt(item.status, 16) & 4) {
					return '#78ce2d'
				} else {
					return '#d3271d'
				}
			},

			otherFun(object) {
				if (object) {
					this.$refs.devset.open(object.sn);
				}
			},

			/**
			 * 点击悬浮
			 */
			trigger(e) {
				if (e.index == 0) {
					this.content[0].active = true;
					this.content[1].active = false;
					this.scanQrCode();
				} else {
					this.content[0].active = false;
					this.content[1].active = true;
					this.$refs.inputDialog.open();
				}
			},
			dialogInputConfirm() {
				if (this.writeDevSn != null && this.writeDevSn != "") {
					this.$refs.inputDialog.close();
					this.$refs.devset.open(this.writeDevSn);
					this.writeDevSn = "";
				}
			},

			scanQrCode() {
				const plat = uni.getSystemInfoSync().uniPlatform;

				if ("web" === plat) {
					this.content[0].active = false;
					this.$tab.navigateTo("/pagesA/work/device/scancode");
				} else {
					// 允许从相机和相册扫码（不支持h5页面）
					uni.scanCode({
						scanType: ["qrCode"],
						success: (res) => {
							if (res.result) {
								if (res.result.length != 14 || !/^[A-Fa-f0-9]{14}$/.test(res.result)) {
									this.$modal.msgError("无效的二维码");
								} else {
									this.$nextTick(() => {
										this.content[0].active = false;
										this.$refs.devset.open(res.result);
									});
								}
							} else {
								console.log("请重新扫描");
								return false;
							}
						},
						fail: (res) => {
							console.log("未识别到二维码");
						},
					});
				}
			},

			/**
			 * 点击悬浮按钮
			 */
			fabClick() {
				this.content[0].active = false;
				this.content[1].active = false;
			},

			/**
			 * 这是一个空格
			 */
			getBlank() {
				return " ";
			},
			/**
			 * 解析进度
			 */
			parsePlan(rate) {
				return _.parseInt(rate, 16);
			},

			/**
			 * 解析16进制
			 */
			parseHex(item) {
				if (item != null && item !== '') {
					let a = Big(_.parseInt(item, 16));
					Big.DP = 2;
					return a.div(10);
				} else {
					return 0;
				}
			},

			parseNumHex(item) {
				if (item) {
					return _.parseInt(item, 16)
				} else {
					return ""
				}
			},
			/**
			 * 机台状态统计数据
			 */
			getStaData() {
				let query = {
					companyId: this.$store.getters.companyId,
					empId: this.query.empId
				};
				getStaNum(query).then((res) => {
					this.stopNum = res.data.stop;
					this.startNum = res.data.start;
					this.onlineNum = res.data.online;
					this.allNum = res.data.allNum;
				});
			},
			/**
			 * 员工筛选列表
			 */
			getEmpolyees() {
				let comId = this.$store.getters.companyId;
				let query = {
					userType: "2",
					companyId: comId,
					pageSize: 1000
				};
				getUserList(query).then((res) => {
					let datas = [];
					res.rows.forEach((t) => {
						datas.push({
							value: t.userId,
							text: t.nickName
						});
					});
					this.employees = datas;
				});
			},

			/**
			 * 客户筛选列表
			 */
			getCustomers() {
				let comId = this.$store.getters.companyId;
				let query = {
					userType: "3",
					companyId: comId,
				};
				getUserList(query).then((res) => {
					let datas = [];
					res.rows.forEach((t) => {
						datas.push({
							value: t.userId,
							text: t.nickName
						});
					});
					this.customers = datas;
				});
			},

			/**
			 * 获取设备列表
			 */
			getDevice(status) {
				if (status === "del") {
					this.query.devNum = "";
				}
				listDevice({
					...this.query
				}).then((res) => {
					uni.stopPullDownRefresh();
					this.total = res.total;
					this.deviceList = res.rows;
				});
			},
			/**
			 * 点击宫格
			 */
			change(e) {
				let devNum = this.deviceList[e.detail.index].devNum;
				let devId = this.deviceList[e.detail.index].deviceId;
				this.$tab.navigateTo(
					"/pagesA/work/device/devDetail?" + "devNum=" + devNum + "&devId=" + devId
				);
			},

			goBack() {
				this.$tab.navigateBack();
			},
		},
	};
</script>


<style>
	page {
		height: 101%;
	}
</style>
<style scoped lang="scss">
	/deep/ .uni-grid--border {
		border-left: 0rpx;
	}

	/deep/ .uni-grid-item--border {
		border-bottom: 0rpx;
		border-right: 0rpx;
	}

	/deep/ .uni-grid-item--border-top {
		border-top: 0rpx #d2d2d2 solid;
	}

	/deep/ .uni-grid-item {
		padding: 10rpx;
	}

	.iconDevice {
		width: 23rpx;
		height: 23rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	/deep/ .uni-select {
		border: none;
	}

	.grid-item-box {
		background-color: #fff;
		overflow: hidden;
		border: 10rpx #fff solid;
	}

	.deviceSerach {
		background-color: #fff;
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		align-items: center;
	}

	/deep/ .uni-section .uni-section-header {
		padding: 0px 20rpx;
	}

	.fivestatus {
		background-color: #fff;
		padding: 5rpx 5rpx 15rpx 5rpx;
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		align-items: center;
	}

	.deviceDetail {
		color: #b1b3b4;
		font-size: 25rpx;
		display: block;
		width: 95%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.deviceTopLeft {
		color: white;
		text-align: center;
		margin-right: auto;
		margin-bottom: 5rpx;
	}

	.deviceTopRight {
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/deep/ .onestatus {
		background-color: #f1f1f1;
		border: #f1f1f1 4rpx solid;
		width: 22%;
		margin: 0 10rpx;
		border-radius: 16rpx;
	}

	/deep/ .form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.scan {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;

		.footer {
			position: fixed;
			bottom: 50rpx;
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>
